<script setup lang="ts">
const loginStore = useLoginStore()
const { userName,passWord } = storeToRefs(loginStore)


const doLogin= async ()=>{
    const loginInfo:Boolean=await loginStore.doLogin()
    if(loginInfo){
      await navigateTo('/piniatest')
    }else{
      alert("登录失败")
    }
}

</script>
<template>
  <div class="h-screen place-content-center bg-fix bgi" >
    <UContainer
      class="w-1/5 h-2/5 place-content-center gap-y-6 flex flex-col shadow-lg hover:shadow-2xl "
    >
    <!-- <img src="/favicon.ico" class="w-16 h-16 place-self-center"/> -->
    <span class="place-self-center box-decoration-slice bg-gradient-to-r from-orange-600 to-purple-500 text-white text-6xl">
  TEST
</span>
      <UFormGroup label="用户名" required class="px-3">
        <UInput
          placeholder="用户名"
          icon="i-heroicons-user"
          v-model.trim="userName"
        />
      </UFormGroup>
      <UFormGroup label="密码" required class="px-3">
        <UInput
          placeholder="密码"
          icon="i-heroicons-shield-check"
          v-model.trim="passWord"
          type="passWord"
        />
      </UFormGroup>
      <UButton
        color="primary"
        variant="solid"
        class="w-20 self-center place-content-center"
        @click="doLogin"
        >登录</UButton
      >
    </UContainer>
  </div>
</template>
<style scoped>
.bgi {
    background-image: url('/RainB.jpg');
}
</style>
